@mixin shake-horizontal($ait: 1s) {
  animation-name           : shake-horizontal;
  animation-duration       : .3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: $ait;
}

@keyframes shake-horizontal {
  2% {
    transform: translate(8px, 0) rotate(0);
  }

  4% {
    transform: translate(7px, 0) rotate(0);
  }

  6% {
    transform: translate(-3px, 0) rotate(0);
  }

  8% {
    transform: translate(-1px, 0) rotate(0);
  }

  10% {
    transform: translate(2px, 0) rotate(0);
  }

  12% {
    transform: translate(8px, 0) rotate(0);
  }

  14% {
    transform: translate(4px, 0) rotate(0);
  }

  16% {
    transform: translate(-8px, 0) rotate(0);
  }

  18% {
    transform: translate(-2px, 0) rotate(0);
  }

  20% {
    transform: translate(0px, 0) rotate(0);
  }

  22% {
    transform: translate(-9px, 0) rotate(0);
  }

  24% {
    transform: translate(-9px, 0) rotate(0);
  }

  26% {
    transform: translate(10px, 0) rotate(0);
  }

  28% {
    transform: translate(7px, 0) rotate(0);
  }

  30% {
    transform: translate(9px, 0) rotate(0);
  }

  32% {
    transform: translate(2px, 0) rotate(0);
  }

  34% {
    transform: translate(5px, 0) rotate(0);
  }

  36% {
    transform: translate(-2px, 0) rotate(0);
  }

  38% {
    transform: translate(5px, 0) rotate(0);
  }

  40% {
    transform: translate(-4px, 0) rotate(0);
  }

  42% {
    transform: translate(8px, 0) rotate(0);
  }

  44% {
    transform: translate(0px, 0) rotate(0);
  }

  46% {
    transform: translate(3px, 0) rotate(0);
  }

  48% {
    transform: translate(0px, 0) rotate(0);
  }

  50% {
    transform: translate(-2px, 0) rotate(0);
  }

  52% {
    transform: translate(-6px, 0) rotate(0);
  }

  54% {
    transform: translate(-6px, 0) rotate(0);
  }

  56% {
    transform: translate(3px, 0) rotate(0);
  }

  58% {
    transform: translate(-5px, 0) rotate(0);
  }

  60% {
    transform: translate(-8px, 0) rotate(0);
  }

  62% {
    transform: translate(-7px, 0) rotate(0);
  }

  64% {
    transform: translate(-1px, 0) rotate(0);
  }

  66% {
    transform: translate(-6px, 0) rotate(0);
  }

  68% {
    transform: translate(10px, 0) rotate(0);
  }

  70% {
    transform: translate(-6px, 0) rotate(0);
  }

  72% {
    transform: translate(8px, 0) rotate(0);
  }

  74% {
    transform: translate(2px, 0) rotate(0);
  }

  76% {
    transform: translate(8px, 0) rotate(0);
  }

  78% {
    transform: translate(-4px, 0) rotate(0);
  }

  80% {
    transform: translate(-6px, 0) rotate(0);
  }

  82% {
    transform: translate(0px, 0) rotate(0);
  }

  84% {
    transform: translate(10px, 0) rotate(0);
  }

  86% {
    transform: translate(0px, 0) rotate(0);
  }

  88% {
    transform: translate(-6px, 0) rotate(0);
  }

  90% {
    transform: translate(4px, 0) rotate(0);
  }

  92% {
    transform: translate(-6px, 0) rotate(0);
  }

  94% {
    transform: translate(-1px, 0) rotate(0);
  }

  96% {
    transform: translate(8px, 0) rotate(0);
  }

  98% {
    transform: translate(-8px, 0) rotate(0);
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

@keyframes pFadeOut {
  0% {
    transform: translateY(0);
    opacity  : 1;
  }

  90% {
    opacity  : 0;
    transform: translateY(-120%);
  }

  100% {
    opacity  : 0;
    transform: translateY(-200%);
  }

}

@keyframes fadeOut {
  0% {
    transform          : translateY(0);
    opacity            : 1;
    height             : 0px;
    border-bottom-width: 50px;
    margin-bottom      : 10px;
  }

  70% {
    opacity: .5;
  }

  98% {
    opacity            : 0;
    height             : 0;
    margin-bottom      : 0;
    border-bottom-width: 0px;
  }

  100% {
    opacity            : 0;
    height             : 0;
    margin-bottom      : 0;
    border-bottom-width: 0px;
    transform          : translateY(-100%);
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(-100%);
    opacity  : 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity  : 1;
  }
}